<template>
  <div class="dashboard-page">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>数据看板</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="18">
        <!-- 工单统计 -->
        <el-col :span="13">
          <el-card
            class="work-bigbox"
            style="
              height: 160px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
            "
          >
            <!-- <i class="el-icon-user"></i> -->
            <h5 class="tit">工单统计</h5>
            <div class="work-box">
              <div class="work">
                <h2 class="num">{{ workSum }}</h2>
                <p class="tag1">工单总数(个)</p>
              </div>
              <div class="work">
                <h2 class="num">{{ completedTotal }}</h2>
                <p class="tag1">完成工单(个)</p>
              </div>
              <div class="work">
                <h2 class="num">{{ workerCount }}</h2>
                <p class="tag1">进行工单(个)</p>
              </div>
              <div class="work">
                <h2 class="num">{{ defaultSum }}</h2>
                <p class="tag1">取消工单(个)</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="11">
          <el-card
            class="a1"
            style="
              height: 160px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            "
          >
            <h5 class="tit">销售统计</h5>
            <div class="work-box">
              <div class="work" style="padding-right: 100px">
                <h2
                  class="num"
                  style="
                    color: #ff5757;
                    text-shadow: 2px 4px 7px rgba(252, 220, 212, 0.2);
                  "
                >
                  {{ PartnersNum }}
                </h2>
                <p class="tag1" style="color: #de96a7">订单量(个)</p>
              </div>
              <div class="work">
                <h2
                  class="num"
                  style="
                    color: #ff5757;
                    text-shadow: 2px 4px 7px rgba(252, 220, 212, 0.2);
                  "
                >
                  {{ salesNum.toFixed(2) }}
                </h2>
                <p class="tag1" style="color: #de96a7">销售额(万/元)</p>
              </div>
            </div>
          </el-card>
        </el-col>

        
        <el-col :span="24">
          <el-card
            style="
              height: 350px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
            "
          >
            <Lineas></Lineas>
            <!-- <Lines2></Lines2> -->
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-card
          style="
            height: 530px;
            margin-right: 15px;
            padding-left: 10px;
            padding-right: 10px;
          "
        >
          <div class="list">
            <div class="title">
              <h4>商品热榜</h4>
            </div>
            <ul>
              <li v-for="(item, index) in classLister" :key="index">
                <el-col class="left" :span="7">{{ index + 1 }}</el-col>
                <el-col class="center" :span="11">{{ item.skuName }}</el-col>
                <el-col class="right" :span="6">{{ item.count }}单</el-col>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="14">
        <el-card
          style="
            height: 350px;
            margin-right: 15px;
            padding-left: 10px;
            padding-right: 10px;
          "
        >
          <h5 class="tit">合作商点位数Top5</h5>
          <Echarts :Point="Point"></Echarts>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card
          style="
            height: 350px;
            margin-right: 15px;
            padding-left: 10px;
            padding-right: 10px;
          "
        >
          <i class="el-icon-user"></i>
          <h5 class="tit">活跃用户</h5>
          <h2 class="num">802</h2>
          <p class="tag"><i>↑ 5.23%</i> 最近一个月</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Lineas from '@/components/Lineas.vue'
// import Lines2 from '@/components/Lines2.vue'
import Echarts from '@/components/Echarts.vue'
import {
  getCooperation,
  getfault,
  getPartners,
  getPoint,
  getsale,
  getSales
} from '@/api/user.js'
export default {
  name: 'DashBoard',
  components: {
    Echarts,
    Lineas
    // Lines2
  },
  data () {
    return {
      workList: [],
      sales: '',
      Partners: '',
      Point: [],
      classLister: []
    }
  },

  async created () {
    const work = await getCooperation()
    console.log(work.data)
    this.workList = work.data
    await getfault()
    const Partners = await getPartners()
    this.Partners = Partners
    const Point = await getPoint()
    this.Point = Point
    const sale = await getsale()
    this.classLister = sale.data
    console.log(this.classLister)

    const sales = await getSales()
    this.sales = sales
  },
  computed: {
    workSum () {
      return this.workList.reduce((sum, item) => {
        sum += item.total
        return sum
      }, 0)
    },
    defaultSum () {
      return this.workList.reduce((sum, item) => {
        sum += item.cancelTotal
        return sum
      }, 0)
    },
    workerCount () {
      return this.workList.reduce((sum, item) => {
        sum += item.workerCount
        return sum
      }, 0)
    },
    completedTotal () {
      return this.workList.reduce((sum, item) => {
        sum += item.completedTotal
        return sum
      }, 0)
    },
    salesNum () {
      return this.sales.data / 1000000
    },
    PartnersNum () {
      return this.Partners.data
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  height: 510px;
  .title {
    display: flex;
    align-items: center;
    padding: 0;
    h4 {
      font-size: 16px;
      color: #333;
    }
    span {
      margin-left: 10px;
      color: #999;
    }
  }
  ul {
    display: flex;
    flex-direction: column;
    margin-left:-30px;
    justify-content: space-around;
    margin-top:-10px;
    height: 460px;
    list-style-type:none;
    padding-left: 30px;
    li {
      .left {
        width: 21px;
        // box-sizing: content-box;

        background: no-repeat
          url();
        background-position: no-repeat center / cover;
        text-align: center;
      }
      .center{
        margin-left: 30px;
      }
      .right {
        text-align: right;
      }
      &:nth-child(1) {
        .left {
          background: no-repeat
            url();
          background-position: no-repeat center / cover;
        }
      }
      &:nth-child(2) {
        .left {
          background: no-repeat
            url();
          background-position: no-repeat center / cover;
        }
      }
      &:nth-child(3) {
        .left {
          background: no-repeat
            url();
          background-position: no-repeat center / cover;
        }
      }
    }
  }
}
.aaa {
  display: flex;
}
.a1 {
  background: url("https://img1.baidu.com/it/u=804699875,2624804129&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=323")
    no-repeat center / cover;
}
.work-bigbox {
  background: url(@/assets/bb.webp) no-repeat center / cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.work-box {
  display: flex;
}
.work {
  padding-top: 10px;
  padding-left: 30px;
  justify-content: space-around;
  .num {
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #072074;
    font-size: 33px;
    margin: 6px 0;
    text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
  }
  .tag1 {
    padding-top: 5px;
    color: #91a7dc;
    margin: 0;
    font-size: 10px;
  }
}
.dashboard-page {
  .el-breadcrumb {
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .el-card {
    border-radius: 20px;

    margin-bottom: 20px;
    position: relative;
    &.row {
      h4 {
        width: 40%;
        float: left;
        font-size: 18px;
        margin-left: 5%;
      }
      img {
        width: 40%;
        float: left;
        margin-left: 10%;
        margin-top: 30px;
      }
    }
    [class^="el-icon"] {
      font-size: 30px;
      color: #ccc;
      position: absolute;
      right: 25px;
      top: 30px;
      font-weight: bold;
    }
    .tit {
      color: #070707;
      font-size: 16px;
      margin: 0px 0;
      font-weight: 800;
    }

    .tag {
      color: #999;
      margin: 0;
      font-size: 14px;
      > i {
        font-style: normal;
        margin-right: 10px;
        color: rgb(10, 207, 151);
        &.red {
          color: #fa5c7c;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    h4 {
      margin: 0;
      padding-bottom: 20px;
      color: #6c757d;
    }
  }
}
</style>
